<template>
  <div class="bar-line-chart-view">
    <stats-chart-empty v-show="isEmpty">
      暂无数据
    </stats-chart-empty>
    <div v-show="!isEmpty" id="BarLineChart" class="bar-line-chart" />
  </div>
</template>

<script>
import * as echarts5 from 'echarts5';
import _ from 'lodash';
import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue';
import {
  useBarChartOption,
  useBarLineChartData
} from './useChartData';
/* component */
import StatsChartEmpty from '@src/modules/report/common/StatsChartEmpty.vue';
/* util */
import { isArray, isEmpty as isEmptyFunction } from '@src/util/type';
/* mixins */
import ChartsMixin from '@src/modules/report/managementReport/charts/components/mixins/charts.mixins';

export default {
  name: 'bar-line-chart',
  mixins: [ChartsMixin],
  components: {
    StatsChartEmpty
  },
  props: {
    chartType: {
      type: String,
      default: ''
    },
    chartData: {
      type: Array,
      default: () => [],
    },
    lineChartData: {
      type: Array,
      default: () => [],
    },
    chartOption: {
      type: Object || String,
    },
  },
  emit: ['fetchTableData'],
  setup(props, { emit }) {
    // 及时关单率 库存周转率
    const chart = ref(null);
    const isEmpty = ref(false);

    const defaultOption = useBarChartOption();

    const drawChart = () => {
      
      let { 
        legendList,
        xAxisList,
        barList,
        barTitle,
        lineSeries
      } = useBarLineChartData(props)
      let yAxisName = '个'
      
      if (isArray(barList?.value)) {
        isEmpty.value = isEmptyFunction(barList.value);
      }

      if (props.chartType === 'spare-parts-turnover') {
        yAxisName = '天'
      }

      const dataOption = {
        tooltip: {
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999',
            },
          },
          formatter(data) {
            const seriesName = data?.name || data?.[0]?.name || ''
						const seriesNameHtml = `<div>${ seriesName }</div>`
            
            let values = ''
            
            data.forEach(item => {
              if (item.seriesType == 'line') {
                values += `<div>${ item.seriesName } ${ item.marker } ${ item.value }%</div>`
              } else {
                values += `<div>${ item.seriesName } ${ item.marker } ${ item.value } ${yAxisName}</div>`
              }
            })
            
						return seriesNameHtml + values
					}
        },
        legend: {
          // data: ['0-1天', '1-2天'],
          data: legendList.value,
        },
        xAxis: [
          {
            data: xAxisList.value,
            axisPointer: {
              type: 'shadow',
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: `单位：${yAxisName}`,
            // min: 0,
            // max: 160,
            // interval: 20,
            nameTextStyle: {
              align: 'right',
              verticalAlign: 'bottom',
              padding: [9, 9, 15, 9],
            },
          },
          {
            type: 'value',
            name: '单位：%',
            // min: 0,
            // max: 40,
            // interval: 10,
            nameTextStyle: {
              align: 'left',
              verticalAlign: 'bottom',
              padding: [9, 0, 15, -10],
            },
          },
        ],
        series: [
          {
            label: {
              show: true,
              position: 'top',
              color: '#606266'
            },
            // data: [92, 86, 128, 150, 128, 102, 128, 150, 128, 92, 86, 128],
            name: barTitle.value,
            type: 'bar',
            data: barList.value,
          },
          ...lineSeries.value,
        ],
      };

      const option = _.merge(dataOption, defaultOption);

      chart.value.clear();
      chart.value.setOption(option);
      nextTick(() => {
        chart.value.resize()
      })
    };

    const initChart = () => {
      chart.value = echarts5.init(
        document.getElementById('BarLineChart'),
        'shb'
      );
      chart.value.on('click', value => {
        if (props.chartType === 'spare-parts-turnover') return
        if (props.chartType === 'repeated-maintenance-rate' ) {
          // if (value.seriesType === 'bar') return
          return emit('fetchTableData')
        }
        emit('fetchTableData', value)
      });
      
      drawChart();
    };

    watch(
      () => [props.chartData, props.lineChartData],
      () => {
        drawChart();
      }
    );

    onMounted(() => {
      initChart();
    });

    onUnmounted(() => {
      if (!chart.value) return;

      chart.value = null;
    });
    
    return {
      chart,
      isEmpty,
      initChart
    }
  },
};
</script>

<style lang="scss" scoped>
.bar-line-chart {
  width: 100%;
  height: 352px;
}

.bar-line-chart-view {
  width: 100%;
  height: 352px;

  position: relative;
}
</style>
